<template>
  <div class="radio-wrapper">
    <div class="header">
      <div class="cancel-svg" @click="onCancle">
        <SvgIcon
          svg-name="cancel"
          class-name="cancel-svg"
          color="var(--title-color)"
        />
      </div>
      <div class="title">{{ props.title }}</div>
      <div class="btn" @click="onConfirm">确定</div>
    </div>

    <div class="body">
      <van-radio-group v-model="state.radioChecked">
        <div
          class="item"
          v-for="item in list"
          :key="item.id"
          @click="state.radioChecked = item.id"
        >
          <van-radio
            :name="item.id"
            label-position="left"
            checked-color="var(--score-primary-color)"
          >
            <span
              :class="['title', item.id == state.radioChecked ? 'active' : '']"
            >
              {{ item.title }}
            </span>
          </van-radio>
        </div>
      </van-radio-group>
    </div>
  </div>
</template>

<script setup>
import { reactive, defineProps, defineEmits, watch } from 'vue'
import { deviceId } from '../../utils/enum'
import EventBus from '@/assets/common/EventBus'
import { useStore } from 'vuex'
const store = useStore()

const props = defineProps(['list', 'value', 'title', 'type', 'randomOverlay'])
const emits = defineEmits(['emitRadioChange', 'emitCancel'])
// type: work:工作时长, strength:刷牙力度
const state = reactive({
  radioChecked: Number(props.value)
})

watch(
  () => props.randomOverlay,
  val => {
    state.radioChecked = Number(props.value)
  },
  { deep: true }
)

watch(
  () => props.value,
  val => {
    state.radioChecked = Number(val)
  },
  { deep: true, immediate: true }
)

const onCancle = () => {
  emits('emitCancel', 'time')
  state.radioChecked = Number(props.value)
}

const onConfirm = () => {
  if (props.type == 'currentPart') {
    localStorage.setItem('start', Number(state.radioChecked))
    EventBus.emit('start', Number(state.radioChecked))
    emits('emitRadioChange', state.radioChecked)
  } else {
    emits('emitRadioChange', state.radioChecked)
    if (props.type == 'workTime') {
      store.commit('setWorkTime', state.radioChecked)
      store.commit('setModeStrength', true)
    }
    if (props.type == 'strength') {
      store.commit('setModeStrength', true)
    }

    Hejia.setControlParam(
      {
        // deviceId,
        parameters: {
          param: [
            {
              name: props.type,
              content: state.radioChecked
            }
          ]
        }
      },
      function () {
        // success, no response
        EventBus.emit('setting', state.radioChecked)
      },
      function (msg, obj) {
        console.log(obj.resultCode + obj.resultCodeMessage)
      }
    )
  }
}
</script>

<style lang="less" scoped>
@import url(./index.less);
</style>
